import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
// import InputModuleID from './components/InputModuleID.vue';
// import { useDebounceFn } from '@vueuse/core';
import { getRoleList } from '/@/api/admin/user';
import { isString } from '/@/utils/is';

import {
  // getModelAllListApi,
  // MODEL_TYPE,
  getTableModelTypeTreeApi,
} from '/@/api/config-center/model-design';
import { getDictTypeListApi } from '/@/api/admin/dict';
import { DICT } from '/@/enums/dict';
import { getDBListApi } from '/@/api/database/account';
// const modelCompenentName = {
//   '1': '/com-model-table/index',
//   '3': '/com-model-complex/index',
// };

export const columns: BasicColumn[] = [
  {
    title: '菜单名称',
    dataIndex: 'name',
    align: 'left',
  },
  {
    title: '标识',
    dataIndex: 'id',
    width: 80,
  },
  {
    title: '排序',
    dataIndex: 'sortOrder',
    width: 80,
  },
  {
    title: '图标',
    dataIndex: 'icon',
    width: 80,
    customRender: ({ record }) => {
      return h(Icon, { icon: record.icon });
    },
  },

  {
    title: '组件路径',
    dataIndex: 'path',
  },
  {
    title: '重定向路径',
    dataIndex: 'redirect',
  },
  {
    title: '启用状态',
    dataIndex: 'typeStatus',
    width: 80,
    customRender: ({ record }) => {
      const status = record.typeStatus;
      const enable = ~~status === 0;
      const color = enable ? 'green' : 'red';
      const text = enable ? '启用' : '禁用';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '显示状态',
    dataIndex: 'visible',
    width: 80,
    customRender: ({ record }) => {
      const visible = record.visible;
      const enable = ~~visible === 1;
      const color = enable ? 'green' : 'red';
      const text = enable ? '显示' : '隐藏';
      return h(Tag, { color: color }, () => text);
    },
  },
];

export const columnsAuth: BasicColumn[] = [
  {
    title: '标识',
    dataIndex: 'userFlag',
    width: 80,
  },
  {
    title: '描述',
    dataIndex: 'flagDesc',
  },
  {
    title: '用户设置',
    dataIndex: 'userRoles',
  },
];

export const formSchemaAuth: FormSchema[] = [
  {
    field: 'userFlag',
    label: '标识',
    component: 'InputNumber',
    required: true,
  },
  {
    field: 'flagDesc',
    label: '权限描述',
    component: 'Input',
    required: true,
  },
  {
    field: 'summary',
    label: '简要说明',
    component: 'Input',
  },
  {
    field: 'roleIds',
    label: '使用角色',
    component: 'ApiSelect',
    componentProps: {
      api: getRoleList,
      labelField: 'roleName',
      valueField: 'roleId',
      mode: 'multiple',
    },
  },
];

export const actionAuths2: any[] = [
  {
    label: '原始代码',
    dataIndex: 'orignCode',
    component: 'Input',
    componentProps: { placeholder: '请输入原始代码' },
  },
  {
    label: '字段代码',
    dataIndex: 'code',
    component: 'Input',
    componentProps: { placeholder: '请输入字段代码' },
  },
  {
    label: '字段名称',
    dataIndex: 'name',
    component: 'Input',
    componentProps: { placeholder: '请输入字段名称' },
  },
  {
    label: '长度',
    dataIndex: 'length',
    component: 'Input',
    componentProps: { placeholder: '请输入长度' },
  },
  {
    label: '小数位数',
    dataIndex: 'decimal',
    component: 'Input',
    componentProps: { placeholder: '请输入小数位数' },
  },
  {
    // 是否主键
    style: 'cursor: pointer;',
    popover: '是否主键',
    specialColumn: true,
    label: '主键',
    dataIndex: 'pkey',
    component: 'Checkbox',
    // componentProps: true,
    // componentProps: { placeholder: '请输入小数位数' },
  },
  // {
  //   specialColumn: true,
  //   label: 'F',
  //   dataIndex: 'FFF',
  //   component: 'Checkbox',
  //   // componentProps: { placeholder: '请输入小数位数' },
  // },
  {
    style: 'cursor: pointer;',
    // popover: '是否可为空',
    // 是否可为空
    specialColumn: true,
    label: '是否非空',
    dataIndex: 'isnullable',
    component: 'Checkbox',
    // component: 'Input',
    // componentProps: { placeholder: '请输入小数位数' },
  },
  // {
  //   label: '数据类型',
  //   dataIndex: 'decimal',
  //   component: 'Input',
  //   componentProps: { placeholder: '请输入小数位数' },
  // },
  // {
  //   field: 'dataType',
  //   label: '数据类型',
  //   required: true,
  //   component: 'ApiSelect',
  //   // defaultValue: 10,
  //   componentProps: {
  //     api: getDictTypeListApi,
  //     labelField: 'label',
  //     valueField: 'intValue',
  //     placeholder: '请选择数据类型',
  //     params: {
  //       type: DICT.DATA_TYPE,
  //     },
  //     getPopupContainer: () => document.body,
  //   },
  //   colProps: { span: 12 },
  // },

  // {
  //   title: 'P',
  //   dataIndex: 'p',
  //   helpMessage: ['是否主键'],
  //   width: 140,
  //   // slots: { customRender: 'slota' },
  //   slots: { title: 'customTitle' },
  // },
];

export const actionAuths: any[] = [
  {
    title: '原始代码',
    dataIndex: 'orignCode',
  },
  {
    title: '字段代码',
    dataIndex: 'code',
  },
  {
    title: '字段名称',
    dataIndex: 'name',
  },
  {
    title: '长度',
    dataIndex: 'length',
  },
  {
    title: '小数位数',
    dataIndex: 'decimal',
  },

  // {
  //   title: 'P',
  //   dataIndex: 'p',
  //   helpMessage: ['是否主键'],
  //   width: 140,
  //   // slots: { customRender: 'slota' },
  //   slots: { title: 'customTitle' },
  // },
];

export const formSchemaAction: FormSchema[] = [
  {
    field: 'orignCode',
    label: '原始代码',
    component: 'Input',
    required: true,
  },
  {
    field: 'code',
    label: '字段代码',
    component: 'Input',
    required: true,
  },
  {
    field: 'name',
    label: '字段名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'dataType',
    label: '数据类型',
    required: true,
    component: 'ApiSelect',
    // defaultValue: 10,
    componentProps: {
      api: getDictTypeListApi,
      labelField: 'label',
      valueField: 'intValue',
      placeholder: '请选择数据类型',
      params: {
        type: DICT.DATA_TYPE,
      },
      getPopupContainer: () => document.body,
    },
    colProps: { span: 12 },
  },
  {
    field: 'length',
    label: '长度',
    component: 'Input',
  },

  {
    field: 'decimal',
    label: '小数位数',
    component: 'Input',
  },
  // {
  //   field: 'decimal1',
  //   label: '字段设置',
  //   component: 'Input',
  //   colProps: { span: 24 },
  // },
  {
    field: 'fieldSetting',
    component: 'CheckboxGroup',
    label: '字段设置',
    colProps: {
      span: 24,
    },
    componentProps: {
      options: [
        {
          label: '是否主键',
          value: '1',
        },
        // {
        //   label: '是否外键',
        //   value: '2',
        // },
        {
          label: '是否非空',
          value: '3',
        },
        {
          label: '是否唯一标识',
          value: '4',
        },
      ],
    },
  },
  {
    field: 'defaultValue',
    label: '缺省值',
    component: 'Input',
    colProps: { span: 12 },
  },

  {
    field: 'max',
    label: '最大值',
    component: 'Input',
    colProps: { span: 12 },
  },
  {
    field: 'min',
    label: '最小值',
    component: 'Input',
    colProps: { span: 12 },
  },
  // {
  //   field: 'fkey',
  //   label: '外键表',
  //   component: 'Input',
  //   colProps: { span: 12 },
  // },
  // {
  //   field: 'memo',
  //   label: '外键字段',
  //   component: 'Input',
  //   colProps: { span: 12 },
  // },
  // {
  //   field: 'imgArr',
  //   label: '图片列表1',
  //   component: 'Input',
  //   colProps: { span: 12 },
  //   // colSlot: 'test',
  //   slot: 'test',
  // },
  // {
  //   title: '图片列表1',
  //   dataIndex: 'imgArr',
  //   helpMessage: ['这是简单模式的图片列表', '只会显示一张在表格中', '但点击可预览多张图片'],
  //   width: 140,
  //   slots: { customRender: 'img' },
  // },
];

// const isDir = (type: string) => type === '0';
// const isMenu = (type: string) => type === '1';
// const isFunctionMenu = (type: number) => type === 2;

// export const searchFormSchema: FormSchema[] = [
//   {
//     field: 'moduleName',
//     label: '菜单名称',
//     component: 'Input',
//     colProps: { span: 8 },
//   },
// ];

// const listModuleParam = reactive({ classify: MODEL_TYPE.LIST, modelName: '' });

export const formSchema = (callback): FormSchema[] => [
  {
    field: 'tableName',
    label: '表格名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'tableCode',
    label: '表格代码',
    component: 'Input',
    required: true,
    componentProps: {
      onChange: (v) => {
        callback && callback(v?.target?.value || (isString(v) ? v : ''));
      },
    },
  },
  {
    field: 'orignName',
    label: '原始代码',
    component: 'Input',
    required: true,
    dynamicDisabled: true,
  },

  {
    field: 'typeId',
    label: '所属分类',
    required: true,
    component: 'ApiTreeSelect',
    colProps: { span: 8 },
    componentProps: {
      placeholder: '请选择所属分类',
      api: getTableModelTypeTreeApi,
    },
  },

  {
    field: 'tableType',
    label: '表格类型',
    required: true,
    component: 'ApiSelect',
    componentProps() {
      return {
        allowClear: false,
        showSearch: true,
        optionFilterProp: 'table_type',
        api: getDictTypeListApi,
        labelField: 'label',
        valueField: 'value',
        params: {
          type: DICT.COMPONENT_NAME_TYPE,
        },
        getPopupContainer: () => document.body,
      };
    },
  },
  {
    field: 'dataSource',
    label: '数据源',
    required: false,
    component: 'ApiSelect',
    componentProps() {
      return {
        allowClear: false,
        showSearch: true,
        optionFilterProp: 'table_type',
        api: getDBListApi,
        labelField: 'connName',
        valueField: 'connCode',
        params: {
          type: DICT.COMPONENT_NAME,
        },
        getPopupContainer: () => document.body,
      };
    },
  },
  {
    field: 'tableDesc',
    label: '表格描述',
    component: 'Input',
    required: false,
    // table_type  tableType
    // /admin/dbsource/getOptions
  },
];
export const searchFormSchema: FormSchema[] = [
  {
    field: 'tableType',
    label: '表格类型',
    required: false,
    component: 'ApiSelect',
    labelWidth: 80,
    colProps: { span: 4 },
    componentProps() {
      return {
        allowClear: true,
        showSearch: true,
        optionFilterProp: 'table_type',
        api: getDictTypeListApi,
        labelField: 'label',
        valueField: 'value',
        params: {
          type: DICT.COMPONENT_NAME_TYPE,
        },
        getPopupContainer: () => document.body,
      };
    },
  },
  {
    field: 'dataSource',
    label: '数据源',
    required: false,
    component: 'ApiSelect',
    labelWidth: 80,
    colProps: { span: 4 },
    componentProps() {
      return {
        allowClear: true,
        showSearch: true,
        optionFilterProp: 'table_type',
        api: getDBListApi,
        labelField: 'connName',
        valueField: 'connCode',
        params: {
          type: DICT.COMPONENT_NAME,
        },
        getPopupContainer: () => document.body,
      };
    },
  },
  {
    field: 'tableCode',
    label: '英文名称',
    required: false,
    component: 'Input',
    labelWidth: 80,
    colProps: { span: 4 },
  },
  {
    field: 'tableName',
    label: '中文名称',
    required: false,
    component: 'Input',
    labelWidth: 80,
    colProps: { span: 4 },
  },

  // {
  //   field: 'type',
  //   label: '数据库表格定义',
  //   component: 'Select',
  //   // required: true,
  //   componentProps: {
  //     options: [
  //       {
  //         label: '必选菜单',
  //         value: 0,
  //       },
  //       {
  //         label: '可选菜单',
  //         value: 1,
  //       },
  //       {
  //         label: '用户菜单',
  //         value: 2,
  //       },
  //     ],
  //   },
  //   colProps: { span: 6 },
  // },
  // {
  //   field: 'type2',
  //   label: '数据库',
  //   component: 'Select',
  //   // required: true,
  //   componentProps: {
  //     options: [
  //       {
  //         label: '必选菜单',
  //         value: 0,
  //       },
  //       {
  //         label: '可选菜单',
  //         value: 1,
  //       },
  //       {
  //         label: '用户菜单',
  //         value: 2,
  //       },
  //     ],
  //   },
  //   colProps: { span: 6 },
  // },
];
